<template>
  <div class="page-container">
    <div class="toolbar" style="float:left;padding-top:10px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:user:save" type="primary" @click="handleAdd" />
        </el-form-item>
      </el-form>
    </div>
    <cs-table
      :table-data="tableData"
      :table-label="tableLabel"
      @handleButton="handleButton"
      :loading="loading"
      :isSelection="isSelection"
      :table-option="tableOption">
    </cs-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageRequest.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageRequest.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right; margin-top: 10px"
    >
    </el-pagination>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @queryList="queryList"></add-or-update>
  </div>
</template>
<script>
  import KtButton from "@/views/Core/KtButton"
  import CsTable from '@/components/cs-table'
  import AddOrUpdate from './add-or-update'
  import {queryConfig, deleteConfig} from '@/api/dailyweekly/workflow'
  export default {
    data() {
      return {
        addOrUpdateVisible: false,
        tableData: [],
        tableLabel: [
          { label: '编码标识', param: 'code', align: 'center'},
          { label: '参数名称', param: 'name', align: 'assignee', isShow: true},
          { label: '参数值', param: 'value', align: 'center', isShow: true},
          { label: '描述', param: 'description', align: 'center', isShow: true}
        ],
        tableOption: {
          label: '操作',
          width: '300',
          options: [
            { label: '编辑', type: '', icon: 'el-icon-edit', methods: 'edit', auth: 'sys:user:save' },
            { label: '删除', type: 'danger', icon: 'el-icon-s-delete', methods: 'delete', auth: 'sys:user:save' }
          ]
        },
        isSelection: false,
        loading: false,
        size: window.SITE_CONFIG.tableSize,
        pageRequest: {
          pageSize: 10,
          pageNo: 1
        },
        totalPage: 0
      }
    },
    created () {
      this.queryList()
    },
    methods: {
      async deleteConfig (id) {
        const data = await deleteConfig(id)
        if (data) {
          if (data.code === 200) {
            this.queryList()
          }
        }
      },
      // 查询
      async queryList () {
        this.loading = true
        const data = await queryConfig(this.pageRequest, 'get')
        if (data) {
          if (data.code === 200) {
            this.loading = false
            this.tableData = data.data.rows
            this.totalPage = data.data.totalRows
          } else {
            this.loading = false
            this.totalPage = 0
            this.tableData = []
          }
        }
      },
      handleAdd () {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },
      handleButton (methods) {
        if (methods.methods === 'edit') {
          this.addOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init(methods.row.id)
          })
        } else if (methods.methods === 'delete') {
          this.$confirm('确认删除这条数据吗？', '提示', {})
            .then(() => {
              this.deleteConfig(methods.row.id)
            })
        }
      },
      sizeChangeHandle (val) {
        this.pageRequest.pageSize = val
        this.pageRequest.pageNo = 1
        this.queryActiveList()
      },
      currentChangeHandle (val) {
        this.pageRequest.pageNo = val
        this.queryActiveList()
      }
    },
    components: {
      KtButton,
      CsTable,
      AddOrUpdate
    }
  }
</script>
